import React, { Component } from 'react'
import styles from './index.less'
import { Card, Input, Icon, Switch, Popconfirm, Tooltip  } from 'antd';
import { connect } from 'dva'

@connect(({ smsSetting, loading }) => ({ 
    setSmsSettingList: smsSetting.setSmsSettingList
}))
export default class SmsSettingView extends Component {

    state = {
        autograph: '',
        exCodeLength: '',
        exCode: ''
    }

    setAutograph = (e)=>{
        this.setState({
            autograph: e.target.value
        })
    }

    setExCodeLength = (e)=>{
        this.setState({
            exCodeLength: e.target.value
        })
    }

    setExCode = (e)=>{
        this.setState({
            exCode: e.target.value
        })
    }

    upDateExCodeLength = ()=>{
        const { dispatch } = this.props;
        const { exCodeLength } = this.state
        dispatch({
            type: 'smsSetting/fetchSaveSmsSetting',
            payload: {
                setName: 'exCodeLength',
                setValue: exCodeLength
            }
        })
    }

    upDateExCode = ()=>{
        const { dispatch } = this.props;
        const { exCode } = this.state
        dispatch({
            type: 'smsSetting/fetchSaveSmsSetting',
            payload: {
                setName: 'exCode',
                setValue: exCode
            }
        })
    }

    upDateAutograph = ()=>{
        const { dispatch } = this.props;
        const { autograph } = this.state
        dispatch({
            type: 'smsSetting/fetchSaveSmsSetting',
            payload: {
                setName: 'autograph',
                setValue: autograph
            }
        })
    }

    render() {
        const { setSmsSettingList, dispatch } = this.props;
        let state = '0';
        let autograph = '';
        let exCodeLength = '';
        let exCode = '';
        setSmsSettingList.forEach( e =>{
            if(e.setName === "smsCheck"){
                state = e.setValue
            }
            if(e.setName === "autograph"){
                autograph = e.setValue
            }
            if(e.setName === "exCodeLength"){
                exCodeLength = e.setValue
            }
            if(e.setName === "exCode"){
                exCode = e.setValue
            }
        })
        let isOpen = state === '1'
        return (
            <div className={styles.content}>
                <Card
                    title="平台设置"
                    style={{ width: '80%' }}
                >   
                    <p>短信签名： 【{autograph}】  
                    <Popconfirm 
                        icon={<Icon style={{ color: '#108ee9',marginTop:'5px' }} type="edit"/>} 
                        title={<Input 
                                    defaultValue = {name} 
                                    placeholder="签名"
                                    onChange={this.setAutograph}/>}  
                        onConfirm={this.upDateAutograph}  
                        okText="Yes" 
                        cancelText="No">
                        <Tooltip title="编辑签名">
                            <Icon style={{ color: '#108ee9' }} type="edit"/>
                        </Tooltip>
                    </Popconfirm>
                    </p>
                    <p>拓展码总长度： {exCodeLength} &nbsp;
                    <Popconfirm 
                        icon={<Icon style={{ color: '#108ee9',marginTop:'5px' }} type="edit"/>} 
                        title={<Input 
                                    defaultValue = {name} 
                                    placeholder="拓展码总长度"
                                    onChange={this.setExCodeLength}/>}  
                        onConfirm={this.upDateExCodeLength}  
                        okText="Yes" 
                        cancelText="No">
                        <Tooltip title="编辑拓展码总长度">
                            <Icon style={{ color: '#108ee9' }} type="edit"/>
                        </Tooltip>
                    </Popconfirm>
                    </p>
                    <p>短信平台拓展码： {exCode} &nbsp;
                    <Popconfirm 
                        icon={<Icon style={{ color: '#108ee9',marginTop:'5px' }} type="edit"/>} 
                        title={<Input 
                                    defaultValue = {name} 
                                    placeholder="短信平台拓展码"
                                    onChange={this.setExCode}/>}  
                        onConfirm={this.upDateExCode}  
                        okText="Yes" 
                        cancelText="No">
                        <Tooltip title="编辑短信平台拓展码">
                            <Icon style={{ color: '#108ee9' }} type="edit"/>
                        </Tooltip>
                    </Popconfirm>
                    </p>
                    <p>短信登录验证： 
                        <Switch checkedChildren="开" unCheckedChildren="关" checked={isOpen} onChange={(e)=>{
                            dispatch({
                                type: 'smsSetting/fetchSaveSmsSetting',
                                payload: {
                                    setName: 'smsCheck',
                                    setValue: isOpen? '0' : '1'
                                }
                            })
                        }}/>
                    </p>
                </Card>
            </div>
        )
    }

    componentDidMount(){
        const { dispatch } = this.props
        dispatch({
            type: 'smsSetting/fetchSelSmsSetting',
        })
    }

}
